<link rel="stylesheet" href="/stylesheets/open-courses.css">

<!--banner-->
<div class="opencourse-top"><img src="http://img.kaikeba.com/opencouse-banner.png"></div>
<!--公开课列表容器-->
<div class="opencourse-contains">
    <!--表头-->
    <div class="head">
        <span class="time">直播时间</span>
        <span class="course">课程</span>
        <span class="signupnumber">报名人数</span>
        <span class="signupstate">课程状态</span>
    </div>
    <!--列表内容-->
    <div class="course-detailed">
        {{#each openCourses}}
            <div class="row">
                <div class="col time">
                    <div class="time-year {{#if notBegin}}notBegin{{/if}}">
                        <div class="top">{{partOfDate time 'd'}}</div>
                        <span>{{partOfDate time 'M'}}月</span>
                    </div>
                    <span class="second second-right">{{partOfDate time 'h' 0}}</span>
                    <span class="second">{{partOfDate time 'h' 1}}</span>
                    <span class="colon">:</span>
                    <span class="second second-right">{{partOfDate time 'm' 0}}</span>
                    <span class="second">{{partOfDate time 'm' 1}}</span>
                </div>
                <div class="col course">
                    <h3>{{name}}</h3>
                    <p>{{description}}</p>
                </div>
                <div class="col signupnumber line-right2">{{count}}</div>
                <div class="col signupstate {{#if notBegin}}notBegin{{/if}}">
                    {{#if notBegin}}
                        预约中
                    {{else}}
                        看回放
                    {{/if}}
                </div>
            </div>
        {{/each}}
    </div>
</div>

<!--分页-->
{{>pager pagination}}

<!--预报名窗口-->
<div id="signup-win">
    <div class="mask"></div>
    <div class="signup-content">
        <div class="course-info">
            <img>
            <h3></h3>
            <p></p>
        </div>
        <div class="signup-form">
            <p> <input id="phone" type="tel" placeholder="请输入手机号">
                <button id="btn-code">获取验证码</button> </p>
            <p> <input id="code" type="text" placeholder="请输入收到的验证码"> </p>
            <p> <button id="btn-signup">报名</button> </p>
        </div>
    </div>
</div>


{{#extend 'jquery'}}
    <script>
        $('.row').click(function () {
            //弹出详情及报名窗口
            $('#signup-win').fadeIn("fast");
            $('body').css({overflow: 'hidden'});

            // 获取课程相应信息
            $('.course-info>img').attr('src', '/images/'+$(this).find('.course').data('poster')); //注意：在上面列表添加data-poster
            $('.course-info>h3').text($(this).find('.course>h3').text());
            $('.course-info>p').text($(this).find('.course>p').text());
        });

        $('.mask').click(function () {
            $('#signup-win').fadeOut("fast");
            $('body').css({overflow: 'auto'});
        });

        //请求短信验证码
        $('#btn-code').click(function () {
            $.ajax({
                url: '/api/code/' + $('#phone').val(),
                success: function (result) {
                    if (result.success) {
                        console.log('请求验证码成功', result.code);

                    } else {
                        alert('请求验证码失败，请重试！');
                    }
                }
            })
        })

        // 提交报名
        $('#btn-signup').click(function () {
            $.ajax({
                url: '/api/code',
                method: 'POST',
                data: {phone: $('#phone').val(), code: $('#code').val()},
                success: function (result) {
                    if (result.success) {
                        alert('报名成功！');
                        // 关闭窗口
                        $('.mask').trigger('click');
                    } else {
                        alert('报名失败！');
                    }
                }
            })
        })
    </script>

{{/extend}}







